<template>
  <div class="m-color-panel">
    <div
      class="color-item"
      :tabindex="props.tabindex"
      :style="{ background: c }"
      @click="emit('update:modelValue', c)"
      @keyup.enter="emit('update:modelValue', c)"
      v-for="c in palette"
    ></div>
  </div>
</template>

<script setup type="typescript">
import { computed, onMounted, useAttrs, ref, watch, reactive } from 'vue';

// 组件传参
const props = defineProps(
	{
		modelValue: {
			type: [String],
			default: '0'
		},
		palette: Array,
		tabindex: {
			type: [String, Number],
			default: '0'
		},
	},
);

// 触发的emit事件
const emit = defineEmits(['update:modelValue']);
</script>

<style lang="scss">
.m-color-panel {
  display: flex;
  flex-wrap: wrap;

  .color-item {
    width: 18px;
    height: 18px;

    &:focus {
      outline: none;
      z-index: 2;
      box-shadow: 0 0 10px 2px rgba(#000, 0.2);
    }
  }
}
</style>
